import {Button, Input} from "antd";

/**
 * 链路追踪id查询组件
 *
 * @param props
 * @constructor
 */
const TraceLogSearch = (props) => {

    const {
        traceId, setTraceId, searchTraceLogsByTraceId
    } = props;

    return (
        <div style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "20px",
            alignItems: "center",
            padding: "8px 0"
        }}>
            <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
                <div style={{
                    color: '#4e5969',
                    fontSize: '14px',
                    fontWeight: 500,
                    whiteSpace: 'nowrap'
                }}>traceId：
                </div>
                <div style={{width: '500px'}}>
                    <Input
                        value={traceId}
                        onChange={(e) => {
                            setTraceId(e.target.value);
                        }}
                        placeholder="请输入链路追踪id"
                        style={{
                            height: '36px',
                            borderRadius: '6px',
                            borderColor: '#d9d9d9',
                            transition: 'all 0.3s ease',
                            fontSize: '13px'
                        }}
                        onFocus={(e) => {
                            e.target.style.borderColor = '#1890ff';
                            e.target.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.target.style.borderColor = '#d9d9d9';
                            e.target.style.boxShadow = 'none';
                        }}
                    />
                </div>
            </div>

            <div style={{display: "flex", alignItems: "center", gap: "16px"}}>
                <Button
                    type={"primary"}
                    style={{
                        height: '40px',
                        padding: '0 24px',
                        borderRadius: '6px',
                        backgroundColor: '#1890ff',
                        borderColor: '#1890ff',
                        fontSize: '14px',
                        fontWeight: 500,
                        transition: 'all 0.3s ease',
                        boxShadow: '0 2px 4px rgba(24, 144, 255, 0.2)'
                    }}
                    hoverStyle={{
                        backgroundColor: '#096dd9',
                        borderColor: '#096dd9',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 4px 8px rgba(24, 144, 255, 0.3)'
                    }}
                    onClick={() => searchTraceLogsByTraceId(traceId)}
                >
                    查询
                </Button>
            </div>
        </div>
    )
}
export default TraceLogSearch;